//近期虎牙比赛（功能17）
//
<template>
  <div>
    <blockquote>数据截止至2021年8月18日晚上7:00</blockquote>
    <el-table :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)" style="width: 100%">
      <el-table-column label="比赛时间" prop="date"> </el-table-column>
      <el-table-column label="直播间名" prop="liveName"> </el-table-column>
      <el-table-column label="比赛情况" prop="matchIntro"> </el-table-column>
      <el-table-column label="比赛状态" prop="state"> </el-table-column>
    </el-table>
        <el-pagination
      :current-page="currentPage"
      :page-size="pageSize"
      @current-change="handleCurrentChange"
      background
      layout="prev, pager, next"
      :total="totalCount"
    ></el-pagination>
  </div>
</template>
<script>
import stores from "@/store";
export default {
  data() {
    return {
      tableData: [],
      currentPage:1,
      pageSize:14,
      totalCount:30
    };
  },
  mounted() {
    this.$axios.post(stores.spring_url + "/match", "function17").then((res) => {
      console.log(res.data);
      this.tableData = res.data.tableData;
      //console.log(res.data.tableData.length)
      this.totalCount=res.data.tableData.length
    });
  },
  methods: {
    handleCurrentChange(page) {
      this.currentPage = page;
    },    
  }
};
</script>
<style>
blockquote {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 40px;
    margin-inline-end: 40px;
    font-size: 12px;
    box-sizing: border-box;
    height: 30px;
    line-height: 30px;
    background: #fde2e2;
    border: 1px solid #F56C6C;
    padding-left: 15px;
    color :#F55151;
    margin-left: 0;
    margin-top: 0;
    margin-right: 0;
}
</style>